<template>
    <a-row>
        <a-col :span="24">
            <a-form class="config-form" layout="vertical" :model="serialConfig">
                <a-row type="flex" :gutter="6">
                    <a-col flex="160px">
                        <a-form-item label="串口">
                            <a-row type="flex">
                                <a-col flex="1">
                                    <a-select style="width: 100%;" v-model:value="serialConfig.port" placeholder="请选择"> 
                                        <a-select-option v-for="(item, index) in port" :key="index" :value="item.path">
                                            {{ item.path }}
                                        </a-select-option>
                                    </a-select>
                                </a-col>
                                <a-col flex="32px">
                                    <a-button type="text" @click="getList" >
                                        <template #icon>
                                            <ReloadOutlined />
                                        </template>
                                    </a-button>
                                </a-col>
                            </a-row>
                        </a-form-item>
                    </a-col>

                    <a-col flex="100px">
                        <a-form-item label="波特率">
                            <a-select style="widows: 100%" v-model:value="serialConfig.baudRate">
                                <a-select-option v-for="(item, index) in rate" :key="index" :value="item">
                                    {{ item }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col flex="70px">
                        <a-form-item label="数据位">
                            <a-select style="widows: 100%" v-model:value="serialConfig.dataBits">
                                <a-select-option v-for="(item, index) in data" :key="index" :value="item">
                                    {{ item }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col flex="70px">
                        <a-form-item label="停止位">
                            <a-select style="widows: 100%" v-model:value="serialConfig.stopBits">
                                <a-select-option v-for="(item, index) in stop" :key="index" :value="item">
                                    {{ item }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col flex="70px">
                        <a-form-item label="校验">
                            <a-select style="widows: 100%" v-model:value="serialConfig.parity">
                                <a-select-option v-for="(item, index) in parity" :key="index" :value="item">
                                    {{ item }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col flex="70px">
                        <a-form-item label=" ">
                            <a-space>
                                <a-button @click="connect" v-if="!status">连接</a-button>
                                <a-button danger @click="close" v-else>关闭</a-button>
                            </a-space>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-col>
      
        <a-col :span="24">
      
            <section class="code-box-meta">
                <div class="code-box-title">
                    <span>01H指令（读线圈寄存器）</span>
                </div>
                <div class="code-box-description">
                    <a-row type="flex">
                        <a-col flex="1">
                            <a-form layout="inline" :model="coils" style="justify-content: space-between;">
                                <a-form-item label="从机地址">
                                    <a-input-number size="small" :min="1" class="min-num" v-model:value="coils.id" />
                                </a-form-item>
                                <a-form-item label="寄存器地址">
                                    <a-input-number size="small" :min="0" class="min-num" v-model:value="coils.start"/>
                                </a-form-item>
                                <a-form-item label="寄存器长度">
                                    <a-input-number size="small" :min="1" class="min-num" v-model:value="coils.len"/>
                                </a-form-item>
                                <a-form-item>
                                    <a-button size="small" type="primary" @click="readCoils">读取</a-button>
                                </a-form-item>
                            </a-form>
                        </a-col>
                    </a-row>
 
                    <a-form layout="inline">
                        <a-form-item label="输出">
                            <span class="ant-form-text">
                                {{ coilsResult }}
                            </span>
                        </a-form-item>
                    </a-form>

                </div>
            </section>

            <section class="code-box-meta">
                <div class="code-box-title">
                    <span>02H指令（读离散寄存器）</span>
                </div>
                <div class="code-box-description">
                    <a-row type="flex">
                        <a-col style="width: 560px;">
                            <a-form layout="inline" :model="discrete" style="justify-content: space-between;">
                                <a-form-item label="从机地址">
                                    <a-input-number size="small" :min="1" class="min-num" v-model:value="discrete.id" />
                                </a-form-item>
                                <a-form-item label="寄存器地址">
                                    <a-input-number size="small" :min="0" class="min-num" v-model:value="discrete.start"/>
                                </a-form-item>
                                <a-form-item label="寄存器长度">
                                    <a-input-number size="small" :min="1" class="min-num" v-model:value="discrete.len"/>
                                </a-form-item>
                                <a-form-item>
                                    <a-button size="small" type="primary" @click="readDiscreteInputs">读取</a-button>
                                </a-form-item>
                            </a-form>
                        </a-col>
                        <a-col flex="1">
                            <a-form layout="inline">
                                <a-form-item label="输出">
                                    <span class="ant-form-text">
                                        {{ discreteResult }}
                                    </span>
                                </a-form-item>
                            </a-form>
                        </a-col>
                    </a-row>
                </div>
            </section>
      
            <section class="code-box-meta">
                <div class="code-box-title">
                    <span>03H指令（读保持寄存器）</span>
                </div>
                <div class="code-box-description">
                    <a-row type="flex">
                        <a-col style="width: 560px;">
                            <a-form layout="inline" :model="register" style="justify-content: space-between;">
                                <a-form-item label="从机地址">
                                    <a-input-number size="small" :min="1" class="min-num" v-model:value="register.id" />
                                </a-form-item>
                                <a-form-item label="寄存器地址">
                                    <a-input-number size="small" :min="0" class="min-num" v-model:value="register.start"/>
                                </a-form-item>
                                <a-form-item label="寄存器长度">
                                    <a-input-number size="small" :min="1" class="min-num" v-model:value="register.len"/>
                                </a-form-item>
                                <a-form-item>
                                    <a-button size="small" type="primary" @click="readHolding">读取</a-button>
                                </a-form-item>
                            </a-form>
                        </a-col>
                        <a-col flex="1">
                            <a-form layout="inline">
                                <a-form-item label="输出">
                                    <span class="ant-form-text">
                                        {{ result }}
                                    </span>
                                </a-form-item>
                            </a-form>
                        </a-col>
                    </a-row>
                </div>
            </section>
      
            <section class="code-box-meta">
                <div class="code-box-title">
                    <span>04H指令（读输入寄存器）</span>
                </div>
                <div class="code-box-description">
                    <a-row type="flex">
                        <a-col style="width: 560px;">
                            <a-form layout="inline" :model="input" style="justify-content: space-between;">
                                <a-form-item label="从机地址">
                                    <a-input-number size="small" :min="1" class="min-num" v-model:value="input.id" />
                                </a-form-item>
                                <a-form-item label="寄存器地址">
                                    <a-input-number size="small" :min="0" class="min-num" v-model:value="input.start"/>
                                </a-form-item>
                                <a-form-item label="寄存器长度">
                                    <a-input-number size="small" :min="1" class="min-num" v-model:value="input.len"/>
                                </a-form-item>
                                <a-form-item>
                                    <a-button size="small" type="primary" @click="readInput">读取</a-button>
                                </a-form-item>
                            </a-form>
                        </a-col>
                        <a-col flex="1">
                            <a-form layout="inline">
                                <a-form-item label="输出">
                                    <span class="ant-form-text">{{ inputResult }}</span>
                                </a-form-item>
                            </a-form>
                        </a-col>
                    </a-row>
                </div>
            </section>
      
            <section class="code-box-meta">
                <div class="code-box-title">
                    <span>05H指令（写单个线圈寄存器）</span>
                </div>
                <div class="code-box-description">
                    <a-row type="flex">
                        <a-col style="width: 560px;">
                            <a-form layout="inline" :model="fc5" style="justify-content: space-between;">
                                <a-form-item label="从机地址">
                                    <a-input-number size="small" :min="1" class="min-num" v-model:value="fc5.id" />
                                </a-form-item>
                                <a-form-item label="寄存器地址">
                                    <a-input-number size="small" :min="0" class="min-num" v-model:value="fc5.start"/>
                                </a-form-item>
                                <a-form-item label="寄存器状态">
                                     <a-switch style="width:66px;" v-model:checked="fc5.state" checked-children="开" un-checked-children="关" />
                                </a-form-item>
                                <a-form-item>
                                    <a-button size="small" type="primary" @click="writeFC5">发送</a-button>
                                </a-form-item>
                            </a-form>
                        </a-col>
                        <a-col flex="1">
                            <a-form layout="inline">
                                <a-form-item label="输出">
                                    <span class="ant-form-text">{{ fc5Result }}</span>
                                </a-form-item>
                            </a-form>
                        </a-col>
                    </a-row>
                </div>
            </section>

            <section class="code-box-meta">
                <div class="code-box-title">
                    <span>06H指令（写单个保持寄存器）</span>
                </div>
                <div class="code-box-description">
                    <a-row type="flex">
                        <a-col style="width: 560px;">
                            <a-form layout="inline" :model="fc6" style="justify-content: space-between;">
                                <a-form-item label="从机地址">
                                    <a-input-number size="small" :min="1" class="min-num" v-model:value="fc6.id" />
                                </a-form-item>
                                <a-form-item label="寄存器地址">
                                    <a-input-number size="small" :min="0" class="min-num" v-model:value="fc6.start"/>
                                </a-form-item>
                                <a-form-item label="寄存器值">
                                    <a-input-number size="small" :min="1" class="min-num" v-model:value="fc6.len"/>
                                </a-form-item>
                                <a-form-item>
                                    <a-button size="small" type="primary" @click="writeFC6">发送</a-button>
                                </a-form-item>
                            </a-form>
                        </a-col>
                        <a-col flex="1">
                            <a-form layout="inline">
                                <a-form-item label="输出">
                                    <span class="ant-form-text">{{ fc6Result }}</span>
                                </a-form-item>
                            </a-form>
                        </a-col>
                    </a-row>
                </div>
            </section>
      
            <section class="code-box-meta">
                <div class="code-box-title">
                    <span>自定义指令</span>
                </div>
                <div class="code-box-description">
                    <a-row type="flex">
                        <a-col style="width: 560px;"> 
                            <a-form layout="inline" :model="custom" style="justify-content: space-between;">
                                <a-form-item label="指令">
                                    <a-input allowClear size="small" style="width: 400px;" v-model:value="custom.value" />
                                </a-form-item>
                                <a-form-item>
                                    <a-button size="small" type="primary" @click="send">发送</a-button>
                                </a-form-item>
                            </a-form>
                        </a-col>
                        <!-- <a-col flex="1">
                            <a-form layout="inline">
                                <a-form-item label="输出">
                                    <span class="ant-form-text">{{ customeResult }}</span>
                                </a-form-item>
                            </a-form>
                        </a-col> -->
                    </a-row>
                </div>
            </section>
            
            <!-- <section class="code-box-meta">
                <div class="code-box-title">
                    <span>输出</span>
                </div>
                <div class="code-box-description">
                    <span style="font-weight: lighter;" v-if="ipcData">
                        {{ getNow() }}:
                    </span>
                    <span style="font-size: 1.2em;letter-spacing: 4px;margin-left: 10px;">
                        {{ ipcData }}
                    </span>
                </div>
            </section> -->

        </a-col>
      
       </a-row>
</template>

<script>
import { ipc } from '@/utils/ipcRenderer'
export default {
    data () {
        return {
            port: [],
            rate: [4800, 9600, 19200, 38400, 57600, 115200],
            data: [7, 8],
            stop: [1, 2],
            parity: ['none', 'odd', 'even'],
            serialConfig: {
                baudRate: 9600,
                dataBits: 8,
                stopBits: 1,
                parity: 'none',
            },
            register: {
                id: 1,
                start: 0,
                len: 2,
            },
            coils: { 
                id: 1,
                start: 0,
                len: 2,
            },
            discrete: { 
                id: 1,
                start: 0,
                len: 2,
            },
            fc5: { 
                id: 1,
                start: 0,
                state: true
            },
            fc6: { 
                id: 1,
                start: 0,
                len: 1
            },
            // 04H表单
            input: { 
                id: 1,
                start: 0,
                len: 2,
            },
            custom: {
                value: '',
            },
            customeResult: '',
            inputResult: '',
            fc5Result: '',
            fc6Result: '',
            coilsResult: '',
            discreteResult: '',
            result: '',

        }
    },
    computed: { 
        status () {
            return this.$store.state.status
        }
    },
    mounted () { 
        this.getList()
    },
    unmounted () {
    },
    methods: { 

        getList () {
            // 获取端口列表
            ipc.invoke('controller.modbusRTU.list', {}).then(res => { 
                this.port = res.data
            })
        },
        connect () { 
             ipc.invoke('controller.modbusRTU.connect', { ...this.serialConfig }).then(res => { 
                console.log(res)
                if (res.status) {
                    this.$store.state.status = true
                    this.$message.success('连接成功')
                } else {
                    this.$message.error(res.msg)
                }
            })
        }, 
        close () { 
            ipc.invoke('controller.modbusRTU.close', {}).then(res => { 
                if (res.status) {
                    this.$store.state.status = false
                    this.$message.success('关闭成功')
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        readHolding () { 
            ipc.invoke('controller.modbusRTU.readHolding', { ...this.register }).then(res => { 
                console.log(res)
                if (res.status) {
                    this.result = res.data.data
                    this.$message.success('读取成功')
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        readCoils () { 
            ipc.invoke('controller.modbusRTU.readCoils', { ...this.coils }).then(res => { 
                console.log(res)
                if (res.status) {
                    this.coilsResult = res.data.data
                    this.$message.success('读取成功')
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        writeFC5 () { 
            ipc.invoke('controller.modbusRTU.writeFC5', { ...this.fc5 }).then(res => { 
                console.log(res)
                if (res.status) {
                    this.fc5Result = res.data
                    this.$message.success('发送成功')
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        writeFC6 () { 
            ipc.invoke('controller.modbusRTU.writeFC6', { ...this.fc6 }).then(res => { 
                console.log(res)
                if (res.status) {
                    this.fc6Result = res.data
                    this.$message.success('发送成功')
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        readInput () { 
            ipc.invoke('controller.modbusRTU.readInput', { ...this.input }).then(res => { 
                console.log(res)
                if (res.status) {
                    this.inputResult = res.data.data
                    this.$message.success('发送成功')
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        readDiscreteInputs () { 
            ipc.invoke('controller.modbusRTU.readDiscreteInputs', { ...this.input }).then(res => { 
                console.log(res)
                if (res.status) {
                    this.discreteResult = res.data.data
                    this.$message.success('发送成功')
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        send () { 
            let args = { ...this.custom }
            args.value = this.custom.value.replaceAll(' ', '')
            console.log(args)
            if (!args.value) {
                this.$message.error('请输入指令')
                return
            }
            ipc.invoke('controller.modbusRTU.send', args).then(res => { 
                console.log(res)
                if (res.status) {
                    this.inputResult = res.data.data
                    this.$message.success('发送成功')
                } else {
                    this.$message.error(res.msg)
                }
            })
        },        
    },
}
</script>

<style scoped>
.ant-form-text{

}

.min-num{
    width: 68px;
}
.min-num :deep(.ant-input-number-input){
    text-indent: 10px;
}

.config-form{
    margin: 10px 0;
}

</style>